<template>
  <div>
    <p>vue3--Demo(使用setup语法糖)--基础语法</p>
    <a-divider>基础语法==内容</a-divider>
    <p>基本数据类型--数值型--当前值：{{ dataId }}</p>
    <a-button type="primary" @click="onChangeDataId">点击按钮改变数据值</a-button>
    <a-divider />
    <p>基本数据类型--bool型--当前值：{{ dataFlag }}</p>
    <a-button type="primary" @click="onChangeDataFlag">点击按钮改变数据值</a-button>
    <a-divider />
    <a-input
      v-model:value="dataDescription"
      size="small"
      show-count
      :maxlength="100"
      placeholder="输入文本信息时自动获取输入值"
      allow-clear
    />
    <p>基本数据类型--字符串型--当前值：{{ dataDescription }}</p>
    <a-divider />
    <p>对象数据类型--当前值：{{ fixModelData }}</p>
    <a-button type="primary" @click="onChangeFixModelData">点击按钮改变对象</a-button>
    <a-divider />
    <p>对象数据类型--当前值：{{ dynamicModelData }}</p>
    <a-button type="primary" @click="onChangeDynamicModelData">点击按钮改变对象</a-button>
  </div>
</template>
<script setup lang="ts">
  console.log('setup 语法糖 执行了。');
  import { random } from 'lodash-es';
  import { ref, reactive } from 'vue';
  import { DataModel } from './data';

  //基本数据类型使用ref包裹变成响应式，实现双向绑定；使用.value进行取值和赋值
  const dataId = ref(1);
  const dataFlag = ref<boolean>(true);
  const dataDescription = ref<string>('信息的描述文字');

  //数组、对象类型使用reactive包裹变成响应式，实现双向绑定，直接使用变量进行取值和赋值；
  //注意不要重复使用reactive赋值；可动态改变数据结构--不指定对象类型时可动态改变
  const fixModelData: DataModel = reactive({
    id: '初始化ID值',
    name: '初始化name值',
    flag: true,
  });
  const dynamicModelData = reactive({});

  function onChangeDataId() {
    let now = new Date();
    dataId.value = now.getSeconds();
  }

  function onChangeDataFlag() {
    dataFlag.value = !dataFlag.value;
  }

  function onChangeFixModelData() {
    //模型结构中未定义的直接赋值不报错，代码中有提示
    fixModelData.attr1 = new Date();
    fixModelData.attr2 = random(10);
    //赋值类型与模型定义类型不一致，赋值也不报错，代码中有提示
    fixModelData.flag = 'flag新值';
  }

  function onChangeDynamicModelData() {
    dynamicModelData.attr1 = new Date();
    dynamicModelData.attr2 = random(10);
  }
</script>
<style scoped></style>
